<template>
  <div>
    <div class="deviceDetails">
      <div class="title">
        <div class="titleText">策略设置</div>
        <div class="close"></div>
      </div>
      <div class="content">
        <el-form :model="policysetForm" label-width="auto">
          <el-form-item label="策略名称" class="elItemBoxMargin">
            <el-input v-model="policysetForm.name" placeholder="请输入" class="name" />
          </el-form-item>
          <el-form-item label="策略方案" class="elItemMargin">
            <span class="brief">请选择动作条件</span>
          </el-form-item>
          <el-form-item label=" " class="elItemBoxMargin">
            <div class="actionCondition">
              <el-input v-model="policysetForm.content" placeholder="请输入内容" class="name" />
              <div class="connect">
                <el-icon>
                  <Link />
                </el-icon>
              </div>
              <el-select v-model="policysetForm.selectValue" placeholder="请选择" class="m-2">
                <el-option v-for="item in conditionSelect" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input v-model="policysetForm.smallContent" placeholder="请输入内容" class="smallName" />
              <div class="minus">
                <el-icon>
                  <Plus />
                </el-icon>
              </div>
              <div class="minus">
                <el-icon color="#fff">
                  <Minus />
                </el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item label=" " class="elItemMargin">
            <span class="brief">选择执行动作（提示：以下动作将按顺序执行,请合理设置动作执行顺序）</span>
          </el-form-item>
          <el-form-item label=" " class="elItemBoxMargin">
            <div class="plate">
              <el-select v-model="policysetForm.plateValue" class="bigSelect" placeholder="请选择">
                <el-option v-for="item in plateOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input v-model="policysetForm.plateInput" placeholder="请输入内容" class="plateInput" />
              <div class="plateMinus">
                <el-icon>
                  <Plus />
                </el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="策略范围" class="elItemMargin">
            <el-button size="14px" @click="openRangeChoice">选择范围</el-button>
          </el-form-item>
          <el-form-item label=" " class="elItemMargin">
            <span class="brief">已选范围</span>
          </el-form-item>
          <el-form-item label=" " class="elItemBoxMargin">
            <div class="scope"></div>
          </el-form-item>
          <el-form-item label="执行日期" class="elItemBoxMargin"
            ><el-radio-group v-model="policysetForm.resource">
              <el-radio label="本日" />
              <el-radio label="本周" />
              <el-radio label="本月" />
              <el-radio label="本年" />
              <el-radio label="自定义" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label=" " class="elItemBoxMargin">
            <el-col :span="3" class="text-center">
              <span class="text-gray-500 brief">日期区间:</span>
            </el-col>
            <el-col :span="9">
              <el-date-picker v-model="policysetForm.startTime" type="date" placeholder="开始日期" />
            </el-col>
            <el-col :span="3" class="text-center">
              <span class="text-gray-500" style="margin-left: 25px">至</span>
            </el-col>
            <el-col :span="9">
              <el-date-picker v-model="policysetForm.endTime" type="date" placeholder="结束日期" />
            </el-col>
          </el-form-item>
          <el-form-item label=" " class="elItemBoxMargin policySettingCheck">
            <el-checkbox-group v-model="policysetForm.type">
              <el-checkbox label="去除法定节假日" class="brief" name="type" />
              <el-checkbox label="去除周六" class="brief" name="type" />
              <el-checkbox label="去除周日" class="brief" name="type" />
              <el-checkbox label="保留法定节假日补班" class="brief" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="执行时段" class="elItemBoxMargin">
            <el-col :span="9">
              <el-date-picker v-model="policysetForm.startTimeFrame" type="date" placeholder="开始日期" />
            </el-col>
            <!-- <el-col :span="1"
                  class="text-center"></el-col> -->
            <el-col :span="9">
              <el-date-picker v-model="policysetForm.endTimeFrame" type="date" placeholder="结束日期" />
            </el-col>
            <el-col :span="6" class="text-center"><el-button size="14">新增时段</el-button></el-col>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="selectRange" v-if="popType">
      <div class="title">
        <div class="titleText">策略设置</div>
        <div class="close"></div>
      </div>
      <div class="rangeContent">
        <div class="content">
          <nav>
            <div class="navTitle">
              <div class="navTopText">回路列表</div>
            </div>
            <el-collapse accordion v-model="activeNames" @change="handleChange" v-for="(item, index) in loopList" :key="index">
              <el-collapse-item :name="String(index + 1)">
                <template #title>
                  <div>
                    <el-checkbox
                      v-model="item.checkAll"
                      @click.stop
                      @change="($event:any) => handleCheckAllChange($event, index)"
                    ></el-checkbox>
                    {{ item.name }}
                  </div>
                  <el-icon :class="'activeNames' === String(index + 1) ? 'downArrow1' : 'downArrow2'"><CaretTop /></el-icon>
                </template>
                <div>
                  <div class="childContent">
                    <el-checkbox-group
                      v-model="loopList[index].checkedCities"
                      @change="($event:any) => handleCheckedCitiesChange($event, index)"
                    >
                      <el-checkbox v-for="(items, indexs) in item.children" :key="indexs" :label="items.text"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </nav>
          <aside>
            <p>已选设备</p>
            <div class="asideTitle">
              <span>名称</span>
              <span>设备编码</span>
              <span>状态</span>
            </div>
            <div
              class="asideList"
              v-for="(item, index) in loopList[asideKey].asideList"
              :key="index"
              :style="{ backgroundColor: (index + 1) % 2 === 0 ? '#000' : '#2b2c2c' }"
            >
              <span>{{ item.name }}</span>
              <span>{{ item.code }}</span>
              <span>{{ item.type }}</span>
            </div>
            <div class="button">
              <div class="leftButton">确定</div>
              <div class="rightButton">取消</div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="popUp">
import { ref } from "vue";
import { controlStrategySave } from "../../api/modules/LightingRequest/light";
/* 点击打开 选择范围弹窗 */
const popType = ref<Boolean>(false);
const openRangeChoice = () => {
  popType.value = !popType.value;
};
const policysetForm = ref<Array<any>>({
  name: "",
  content: "", // 动作条件 大输入框值
  smallContent: "", // 动作条件 小输入框值
  plateValue: "", // 班牌 select-value
  plateInput: "", // 班牌 input-value
  selectValue: "", // 策略方案 select
  region: "",
  startTime: "", // 开始时间
  endTime: "",
  type: [],
  resource: "",
  desc: "",
  startTimeFrame: "", // 执行时段
  endTimeFrame: ""
});
// 策略方案 小select
const conditionSelect = ref<Array<any>>([
  {
    value: "等于",
    label: "等于"
  },
  {
    value: "小于",
    label: "小于"
  },
  {
    value: "大于",
    label: "大于"
  }
]);
// 电子班牌 options
const plateOptions = ref<Array<any>>([
  {
    value: "电子班牌控制（DZBP）",
    label: "电子班牌控制（DZBP）"
  },
  {
    value: "电子班牌控制（DZBP）",
    label: "电子班牌控制（DZBP）"
  },
  {
    value: "电子班牌控制（DZBP）",
    label: "电子班牌控制（DZBP）"
  }
]);
const onSubmit = () => {
  // 保存 请求
  controlStrategySave({
    strategyName: "",
    plan: {},
    equipmentLabelVOlist: {},
    timeFrameVO: "",
    type: ""
  }).then((res: any) => {
    console.log(res);
  });
};

// 右侧 导航栏
const asideKey = ref<number>(0);
const loopList = ref<Array<any>>([
  {
    name: "教学楼",
    checkAll: false,
    checkedCities: [],
    cities: ["教学楼一层回路1", "教学楼一层回路2", "教学楼一层回路3", "教学楼一层回路4", "教学楼一层回路5", "教学楼一层回路6"],
    children: [
      {
        text: "教学楼一层回路1",
        check: false
      },
      {
        text: "教学楼一层回路2",
        check: false
      },
      {
        text: "教学楼一层回路3",
        check: false
      },
      {
        text: "教学楼一层回路4",
        check: false
      },
      {
        text: "教学楼一层回路5",
        check: false
      },
      {
        text: "教学楼一层回路6",
        check: false
      }
    ],
    asideList: [
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      }
    ]
  },
  {
    name: "北大门",
    checkAll: false,
    cities: ["教学楼一层回路1", "教学楼一层回路2", "教学楼一层回路3", "教学楼一层回路4", "教学楼一层回路5", "教学楼一层回路6"],
    checkedCities: [],
    children: [
      {
        text: "北楼一层回路1",
        check: false
      },
      {
        text: "北学楼一层回路2",
        check: false
      },
      {
        text: "北学楼一层回路3",
        check: false
      },
      {
        text: "北学楼一层回路4",
        check: false
      },
      {
        text: "北学楼一层回路5",
        check: false
      },
      {
        text: "北学楼一层回路6",
        check: false
      }
    ],
    asideList: [
      {
        name: "教学楼一层回路2",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路2",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      }
    ]
  },
  {
    name: "东大门",
    checkAll: false,
    cities: ["教学楼一层回路1", "教学楼一层回路2", "教学楼一层回路3", "教学楼一层回路4", "教学楼一层回路5", "教学楼一层回路6"],
    checkedCities: ["教学楼一层回路2", "教学楼一层回路3"],
    children: [
      {
        text: "教学楼一层回路1",
        check: false
      },
      {
        text: "教学楼一层回路2",
        check: false
      },
      {
        text: "教学楼一层回路3",
        check: false
      },
      {
        text: "教学楼一层回路4",
        check: false
      },
      {
        text: "教学楼一层回路5",
        check: false
      },
      {
        text: "教学楼一层回路6",
        check: false
      }
    ],
    asideList: [
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      }
    ]
  },
  {
    name: "西大门",
    checkAll: false,
    cities: ["教学楼一层回路1", "教学楼一层回路2", "教学楼一层回路3", "教学楼一层回路4", "教学楼一层回路5", "教学楼一层回路6"],
    checkedCities: [],
    children: [
      {
        text: "教学楼一层回路1",
        check: false
      },
      {
        text: "教学楼一层回路2",
        check: false
      },
      {
        text: "教学楼一层回路3",
        check: false
      },
      {
        text: "教学楼一层回路4",
        check: false
      },
      {
        text: "教学楼一层回路5",
        check: false
      },
      {
        text: "教学楼一层回路6",
        check: false
      }
    ],
    asideList: [
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      },
      {
        name: "教学楼一层回路1",
        code: "XNDX_JXL_01F-001",
        type: "在线"
      }
    ]
  }
]);
const activeNames = ref(["1"]);
// 导航栏点击
const handleChange = (val: string) => {
  if (val) {
    asideKey.value = Number(val) - 1;
  }
};

// 多选
const handleCheckAllChange = (val: boolean, index: number) => {
  console.log(val, index, loopList.value[index].checkedCities, loopList.value[index].cities);
  loopList.value[index].checkedCities = val ? loopList.value[index].cities : [];
};
const handleCheckedCitiesChange = (value: string[], index: number) => {
  const checkedCount = value.length;
  loopList.value[index].checkAll = checkedCount === loopList.value[index].cities.length;
  //   loopList.value[index].checkAll = checkedCount > 0 && checkedCount < loopList.value[index].cities.length;
};
</script>

<style lang="less" scoped>
@import "./policySetting.less";
</style>

function $forceUpdate() { throw new Error("Function not implemented."); }
